<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml">
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/logo.png"/>
    <title>物资管理调度系统</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mmss.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/Chart.js"></script>
</head>
<body>
<!--引入头部header-->
<div th:replace="header :: header"></div>

<section >
    <div class="container-fluid">
        <div class="row ">
            <!--左侧导航开始-->
            <div th:replace="leftMenu :: leftMenu"></div>
            <!--左侧导航结束-->
            <!----------------------------------------------------------------------------------------------------->
            <!--右侧内容开始-->
            <div class="col-xs-10">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="index"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理 - 图表</li>
                </ol>
                <div class="chart">
                    <div class="canvas" >
                        <h3 class="text-primary">资金投入趋势</h3>
                        <canvas id="canvas"></canvas>
                    </div>
                    <div  class="canvas">
                        <h3 class="text-primary">员工项目比例</h3>
                        <canvas id="canvas1" ></canvas>
                    </div>

                </div>

            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>

<!--引入尾部footer-->
<div th:replace=footer::footer></div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    /*Bootlint工具用于对页面中的HTML标签以及Bootstrapclass的使用进行检测*/
    // (function () {
    //     var s = document.createElement("script");
    //     s.onload = function () {
    //         bootlint.showLintReportForCurrentDocument([]);
    //     };
    //
    //     s.src = "js/bootlint.js";
    //     document.body.appendChild(s);
    // })();

    let names=[]
    var projects=[]
    var startTimes=[]
    var proIncome=[]
    var proInves=[]
    /*Chart的数据*/
    function lineChart() {
          $.ajax({
              type: 'get',
              url: '/getProjectDetails',
              dataType: 'json',
              success: function (data) {
                  var dataList = data.data.dataList;
                  for (var i = 0; i < dataList.length; ++i) {
                      startTimes.push(dataList[i].startTimes);
                  }
                  for(var i = 0;i < dataList.length;++i) {
                      proIncome.push(dataList[i].proIncome)
                  }
                  for(var i = 0;i < dataList.length;++i) {
                      proInves.push(dataList[i].proInves)
                  }

            var ctx = document.getElementById('canvas').getContext("2d")
            var data = {
                labels: startTimes,//开始时间
                datasets: [{
                    label: "项目投入资金",
                    fillColor: "rgba(200,200,200,0.2)",
                    strokeColor: "rgba(200,200,200,1)",
                    pointColor: "rgba(200,200,200,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(200,200,200,1)",
                    data: proInves //项目总投入
                },
                    {
                        label: "项目阶段收益",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: proIncome  //项目总收入
                    }]
            };
            var salesVolumeChart = new Chart(ctx).Line(data);
              }
          })
        }
        function barChart() {
            $.ajax({
                type: 'get',
                url: '/getEmployeeList',
                dataType: 'json',
                success: function (data) {
                    var dataList = data.data.dataList;
                    for (var i = 0; i < dataList.length; ++i) {
                        names.push(dataList[i].empName);
                    }
                    for(var i = 0;i < dataList.length;++i){
                        projects.push(dataList[i].ProNums);
                    }
                    var ctx = document.getElementById('canvas1').getContext("2d");
                    var data = {
                        labels: names,
                        datasets: [{
                            label: "name",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: projects
                        }]
                    };
                    // var salesVolumeChart = new Chart(ctx).Line(data);

                    var salesVolumeChart = new Chart(ctx).Bar(data, {
                        // 点击的小提示
                        tooltipTemplate: "<%if (label){%><%=label%> 项目数：<%}%><%= value %>个"
                    });
                }
            })
        }

 // 启动
   setTimeout(function () {
            // 避免IE7-8 调用getContext报错，使用setTimeout
            lineChart()
            barChart()
    }, 0)
if (/Mobile/i.test(navigator.userAgent)) {
            //针对手机，性能做一些降级，看起来就不会那么卡了
            Chart.defaults.global.animationSteps = Chart.defaults.global.animationSteps / 6
            Chart.defaults.global.animationEasing = "linear"
        }

</script>
</body>
</html>